<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>楚天名医</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
		<link rel="stylesheet" href="../css/font-awesome.min.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style type="text/css">
			body {
				font-family: "微软雅黑";
				font-weight: 400;
			}
			.mui-bg{
				height: 10px;
    			background: #EFEFF4;
			}
			.mui-pull-left {
				color: #8cb33e;
			}
			
			.mui-title {
				color: #8cb33e;
			}
			.mui-coursename{
			    font-size: 16px;
			    line-height: 16px;
			    font-weight: 400;
			    color: #666;
			}
			.mui-price{
				font-weight: 700;
				color: #67B6D7;
				font-size: 18px;
				line-height: 20px;
			}
			.mui-original-price{
				font-weight: 400;
				font-size: 13px;
				color: #E4E4E4;
				text-decoration: line-through;
			}
			.mui-shop{
				color: #79ABC6;
				line-height: 20px;
				font-size: 14px;
				padding: 7px;
				text-align: center;
				font-weight: 700;
			    font-style: normal;
			    line-height: 20px;
			}
			.mui-shop-detail{
				padding: 0px 25px 5px 25px;
			    text-align: justify;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 12px;
			    color: rgb(153, 153, 153);
			    line-height: 24px;
			}
			.mui-teacher-detail{
			    padding: 0px 10px;
			}
			.mui-teacher-detail p{
				padding: 0px;
				margin: 0px;
				color: #CCCCCC;
				font-size: 13px;
			    color: #CCCCCC;
			    
			    line-height: 22px;
			}
			
			/*名医推荐*/
			.mui-size10{
				font-size: 10px;
				color: #2196f3;
			}
			.box-top {
				margin-top: 10px;
			    padding: 10px 20px;
			    font-weight: bold;
			    font-size: 15px;
			    color: #2196f3;
			    text-align: center;
			    background-color: #FFF
			}
			.mui-segmented-control.mui-scroll-wrapper {
			    height: 200px;
			    background-color: #fff;
			}
			.mui-doctor-img{
				width: 80px !important;
			}
			.mui-doctor-tj{
				overflow: hidden;
			    border-radius: 15px;
			    border-bottom-left-radius: 0;
			    background-color: #2196f3;
			    padding: 0px 11px;
			    position: absolute;
			    color: #fff;
			    top: -5px;
			    right: 10px;
			    font-size: 11px;
			}
			.mui-table-view:before {
			    position: absolute;
			    right: 0;
			    left: 0;
			    height: 1px;
			    content: '';
			    -webkit-transform: scaleY(.5);
			    transform: scaleY(.5);
			    background-color: #fff;
			    top: -1px;
			}
			.mui-table-view-cell:after {
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    left: 15px;
			    height: 1px;
			    content: '';
			    -webkit-transform: scaleY(.5);
			    transform: scaleY(.5);
			    background-color: #fff;
			}
			.mui-doctor ul{
				overflow: hidden;
				padding-left: 0px;
				margin: 0px
			}
			.mui-doctor li{
				display: inline-block; 
				width: 170px; 
				position: relative;
				margin-top: 5px;
			}
		</style>
		<style type="text/css">
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{
				border: none;
			}
			.mui-flex{
				display: flex;
				width: 100%;
			}
			.mui-right{
				position: absolute;
				right: 20px;
				font-weight: 400;
			    font-style: normal;
			    font-size: 14px;
			    color: #666666;
			    line-height: normal;
			}
			.mui-report{
				width: 28px !important;
    			height: 28px;
			}
			.fa-star{
				color: #E09844;
			}
			#item2 li{
				margin: 0px 15px;
				padding: 11px 0px;
				border-bottom: 1px solid #ccc;
			}
			.mui-username{
				font-weight: 400;
				font-style: normal;
				color: #999999;
			}
			.mui-content{
				font-weight: 400;
			    font-style: normal;
			    font-size: 12px;
			    color: #999999;
			    line-height: 24px;
			    background-color: #fff; 
			}
			.mui-send-time{
				font-weight: 400;
			    font-style: normal;
			    font-size: 12px;
			    color: #CCCCCC;
			    text-align: left;
			    line-height: 24px;"
			}
			.mui-segmented-control .mui-active{
				font-weight: bold;
    			color: rgba(0, 159, 209, 0.498)!important;
			}
			.mui-slider-progress-bar{
    			background-color: rgba(0, 159, 209, 0.498)!important;
			}
			/*图片顺时针旋转180度*/
			.rotate180 {
			   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
			   -moz-transform: rotate(180deg);
			   -o-transform: rotate(180deg);
			   -webkit-transform: rotate(180deg);
			   transform: rotate(180deg);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">课堂详情</h1>
		</header>
		<div style="overflow: hidden;margin-bottom: 50px;">
			<div style="width: 100%;">
				<video id="video1" width="420" style="margin-top:15px;width: 100%;" preload="auto" controls="controls">
					<!--<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />-->
					<source src="../view/mov_bbb.ogg" type="video/ogg" />
				</video>
			</div>
			<div class="mui-slider" style="background-color: white;">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1">讲课介绍</a>
					<a class="mui-control-item" href="#item2">评论</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-bg" style="height: 2px;"></div>
						<div style="text-align: center;padding: 20px 40px;">
							<div class="mui-course-title mui-ellipsis mui-coursename">31~36月龄宝宝&lt;运动与认知&gt;评估...</div>
							<div class="mui-ellipsis" style="color: #CCCCCC; font-size: 12px; line-height: 28px;">操作简便、老少皆可适用</div>
							<div class="mui-ellipsis">
								<span class="mui-price" style="">¥998</span>
								<span class="mui-original-price">¥1998</span>
								<span style="font-size: 13px;color: #E4E4E4;">已有1268人报名 </span>
							</div>
						</div>
						<div class="mui-bg"></div>
						<div>
							<div class="mui-shop">商品介绍</div>
							<div class="mui-shop-detail">
								适用于对较大躯体区域，如骨盆、胸柱、肩胛带、双膝等部位的治疗。由于其万能机械臂的造型也适用于治疗肢体或脊柱等各部位。对神经痛，四肢血栓性脉管炎，胆囊炎，肝炎，膀胱炎，肾炎，前列腺炎，急性软组织化脓性验证（如乳腺炎），胸膜炎，肺炎等都有一定的辅助疗效。
							</div>
						</div>
						<div class="mui-bg" style="height: 5px;"></div>
						<div>
							<div class="mui-shop">讲师介绍</div>
							<div>
								<div style="display: -webkit-box;overflow: hidden;padding: 10px;padding: 5px 35px;">
						            <img style="width: 65px;border-radius: 33px;" src="../img/teacher.png">
						            <div class="mui-teacher-detail">
						                <p class="mui-ellipsis">讲师：黄清清    骨科专家</p>
						                <p class="mui-ellipsis">湖北医科大学附属华师</p>
						                <p class="mui-ellipsis">第一医院主治医生</p>
						            </div>
								</div>
								<div class="mui-shop-detail">
									从事教育行业20多年，专注青少年成长研究，现为厦门亲子教育、家长课堂首席讲师。曾多次受全国各地亲子园、中小学的邀请，针对中小学生家庭教育和培养亲子关系，举办了近千场青少年及家长心理辅导与培训。获得家长们的一致好评。							
								</div>
							</div>
						</div>
						<div class="mui-bg" style="height: 5px;"></div>
						<div>
					    	<div class="box-top">名医推荐</div>
					    	<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
								<div class="mui-scroll mui-doctor">
									<ul>
										<li>
											<img class="mui-doctor-img" src="../img/doctor.png"/>
											<div class="mui-doctor-tj">推荐</div>
											<div class="mui-ellipsis" style="font-size: 10px;color:#666;">
												刘新楼 主治医师 儿科
											</div >
											<div class="mui-ellipsis-2 mui-size10" style="color: #999;">
												擅长：儿童感染、呼吸、消化、及肝病
											</div >
											<div class="mui-ellipsis mui-size10">
												图文 ￥99.00
											</div >
											<div class="mui-ellipsis mui-size10">
												视频 ￥199.00/15分钟
											</div >
										</li>
										<li>
											<img class="mui-doctor-img" src="../img/doctor.png"/>
											<div class="mui-doctor-tj">推荐</div>
											<div class="mui-ellipsis" style="font-size: 10px;color:#666;">
												刘新楼 主治医师 儿科
											</div >
											<div class="mui-ellipsis-2 mui-size10" style="color: #999;">
												擅长：儿童感染、呼吸、消化、及肝病
											</div >
											<div class="mui-ellipsis mui-size10">
												图文 ￥99.00
											</div >
											<div class="mui-ellipsis mui-size10">
												视频 ￥199.00/15分钟
											</div >
										</li>
										<li>
											<img class="mui-doctor-img" src="../img/doctor.png"/>
											<div class="mui-doctor-tj">推荐</div>
											<div class="mui-ellipsis" style="font-size: 10px;color:#666;">
												刘新楼 主治医师 儿科
											</div >
											<div class="mui-ellipsis-2 mui-size10" style="color: #999;">
												擅长：儿童感染、呼吸、消化、及肝病
											</div >
											<div class="mui-ellipsis mui-size10">
												图文 ￥99.00
											</div >
											<div class="mui-ellipsis mui-size10">
												视频 ￥199.00/15分钟
											</div >
										</li>
										<li style="padding: 0px 20px;margin: 0px;">
											<div style="border: 1px solid #E4E4E4;">
												<div class="mui-ellipsis" style="height: 75px;">
												</div >
												<span style="font-family:'FontAwesome';font-weight:400;font-size: 28px;color: #ccc;"></span>
												<div class="mui-ellipsis" style="font-size: 14px;color:#666;">
													查看更多
												</div>
												<div class="mui-ellipsis" style="height: 75px;">
												</div >
											</div>
										</li>
									</ul>				
								</div>
							</div>
					    </div>
					</div>
					<div id="item2" class="mui-slider-item mui-control-content">
						<div class="mui-bg" style="height: 2px;"></div>
						<div class="mui-shop">讲课评价</div>
						<ul class="mui-table-view">
							<li class="mui-media">
					            <img class="mui-media-object mui-pull-left" style="width: 40px;border-radius: 20px;" src="http://placehold.it/40x30">
					            <div class="mui-media-body">
					                <div class="mui-flex">
					                	<div class="mui-username">Mokiee</div>
					                	&nbsp;&nbsp;
					                	<div>
					                		<i class="fa fa-star" aria-hidden="true"></i> 
					                		<i class="fa fa-star" aria-hidden="true"></i> 
					                		<i class="fa fa-star" aria-hidden="true"></i>
					                		<i class="fa fa-star" aria-hidden="true"></i> 
					                	</div>
					                	<div class="mui-right">
					                		<img class="mui-report" src="../img/jb.svg">
					                	</div>
					                	<div class="show-report" show="false" style="position: absolute;right: 8px;top: 30px;display: none;">
											<div style="position: relative;">  
												<img class="rotate180" src="../img/jb.png" >  
												<span style="position: absolute; top: 20px; left: 30px;color:#CCCCCC">
													<i class="fa fa-exclamation-triangle" success="false" aria-hidden="true"></i>
													举报
												</span>  
											</div> 
										</div>
					                </div>
					                <div class="mui-content">何川老师真的很负责任，每次咨询都回复的非常仔细，我的腿经过一周的诊疗已经明显好转....</div>
					                <div class="mui-flex">
					                	<div class="mui-send-time">1周前</div>
					                	<div class="mui-right" style="    font-size: 16px;padding-right: 3px;">
					                		<i class="fa fa-thumbs-o-up" success= "false" aria-hidden="true"></i>
					                		<span class="dianzan">8</span>
					                	</div>
					                </div>
					            </div>
						    </li>
						</ul>
					</div>
				</div>
			</div>
			<span style="font-family:Microsoft YaHei;font-size:18px;display: none;">
				<div style="position: relative; width: 170px; height: 89px;">  
					<img class="rotate180" src="../img/jb.png" >  
					<span style="position: absolute; top: 20px; left: 25px;color:#CCCCCC">
						<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
						举报
					</span>  
				</div> 
			</span> 
		</div>
		<nav class="mui-bar mui-bar-tab" style="background-color: white">
		    <a class="mui-tab-item">
		    </a>
		    <a class="mui-tab-item" style="color: white;background-color:rgba(26, 188, 156, 1)">
		        <span class="mui-tab-label">我要打赏</span>
		    </a>
		    <a class="mui-tab-item" style="color: white;background-color: rgba(255, 168, 71, 1);">
		        <span class="mui-tab-label">立即购买</span>
		    </a>
		</nav>
	</body>
	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript">
		mui('.mui-scroll-wrapper').scroll()
		$(function(){
			//点赞
			$('.fa-thumbs-o-up').click(function(){
				var success = $(this).attr("success");
				if(success === "true"){//取消点赞
					$(this).removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
					$(this).attr("success","false");
					var dianzan = parseInt($('.dianzan').html()) ;
					$('.dianzan').html(dianzan - 1);
					mui.toast("取消点赞成功！");
				}else{//点赞
					$(this).removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
					$(this).attr("success","true");
					var dianzan = parseInt($('.dianzan').html());
					$('.dianzan').html(dianzan + 1);
					mui.toast("点赞成功！");
				}
			});
			//举报框淡入淡出
			$('.mui-report').click(function(){
				var show = $(".show-report").attr("show");
				if(show === "true"){
					$(".show-report").fadeOut(500);
					$(".show-report").attr("show","false");
				}else{
					$(".show-report").fadeIn(500);
					$(".show-report").attr("show","true");
				}
			});
			//举报事件
			$('.show-report').click(function(){
				mui.toast("举报成功!");
				$(".show-report").fadeOut(500);
			});
		})
	</script>
</html>